// @flow
import {
  EyeTwoTone,
  LikeFilled,
  LikeTwoTone,
  LockOutlined,
  MessageTwoTone,
  UserOutlined,
} from '@ant-design/icons';
import { Avatar, Typography } from 'antd';
import dayjs from 'dayjs';
import * as React from 'react';
import './index.less';
type Props = {
  listData: ARTICLEAPI.ARTICLE[];
};
const { Paragraph } = Typography;
const Index: React.FC<Props> = (props) => {
  const { listData = [] } = props;
  return (
    <div className="lbbArticleList">
      {listData.map((item) => (
        <div className="lbbArticleItem" key={item.articleId}>
          <div className="lbbPicture">
            <img src={item.user.headPortrait} />
            <span />
          </div>
          <div className="lbbRightContent">
            <div className="lbbRow1">
              <Avatar icon={<UserOutlined />} />
              <a className="lbbAuthorName">{item.user.nickname}</a>
              <div className="lbbCreateDate">
                {dayjs(item.articleCreationTime).format('YYYY-MM-DD HH:mm:ss')}
              </div>
              <div className="lbbLabelWrapper">
                {item.articleLabelList?.map((labelItem) => {
                  return (
                    <a className="lbbCategory" key={labelItem.articleLabelId}>
                      {labelItem.articleLabelName}
                    </a>
                  );
                })}
              </div>
            </div>
            <div className="lbbArticleTitle">
              <span
                dangerouslySetInnerHTML={{
                  __html: item.articleTitle,
                }}
              />
              <LockOutlined className="lbbLockOutlined" />
            </div>
            <Paragraph className="lbbContents" ellipsis={{ rows: 2, expandable: false }}>
              <div
                dangerouslySetInnerHTML={{
                  __html: item.articleSummary,
                }}
              />
            </Paragraph>
            <div className="lbbAttribute">
              <div className="lbbActionIcon" key="1">
                <EyeTwoTone twoToneColor="#bbb" />
                <span>1</span>
              </div>
              <div className="lbbActionIcon" key="2">
                {item.isLike ? (
                  <LikeFilled style={{ color: 'var(--ant-primary-color)' }} />
                ) : (
                  <LikeTwoTone twoToneColor="#bbb" />
                )}
                <span style={{ color: item.isLike ? 'var(--ant-primary-color)' : 'unset' }}>2</span>
              </div>
              <div className="lbbActionIcon" key="3">
                <MessageTwoTone twoToneColor="#bbb" />
                <span>3</span>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};
export default Index;
